
//设置点击方块变色
function ClickBlock() {
var Block = document.getElementsByTagName('span');
for (let index = 0; index < Block.length; index++) {
    const element = Block[index];
    if(element.className=='Black-Block'){
    element.addEventListener('click',function(){
        element.className='Grey-Block';
        SumScore();
    })
    }else{
        element.addEventListener('click',function () {
            element.className='Red-Block';
            let Lose = document.getElementById('Lose');
            Lose.style.height="300px"
            Lose.style.transition="all 0.5s"
            Lose.style.zIndex='10';
        })
    };
}
}

//创造行方块
// function CreateNewLine() {
//     var Container = document.getElementsByClassName('Line-Block');
//     var CreateDiv=document.createElement('div');
//     var CreateSpan = document.createElement('span')
//     for(let i =0;i<=4;i++){
//     CreateDiv.appendChild(CreateSpan);
//     }
//     Container.insertBefore(Container);

//游戏开始
GameStart();

//方块向下平移,计时器内容显示
function GameStart() {
    var Start = document.getElementById('ClassicGame-Start')
    Start.addEventListener('click',function BlockDown(){
    // CreateNewLine();
    Start.className='Grey-Block';
    var Move=document.getElementById('Line')
    Move.style.transform
    ='translateY(6400px)';
    Move.style.transition= ' all 20s linear';
    setInterval(function(){
        timer.innerHTML=showtime();
        BlackBottom();
    },1000); 
    ClickBlock();
    
})
}

//判断元素是否触碰底线
// function TouchBottom(ele) {
// }
// var Main_element = document.getElementById('Game-Container')
// console.log(Main_element);
// var x_pos = Main_element.style.top;
// var y_pos = Main_element.style.bottom;
// console.log(x_pos,y_pos);

//经典模式倒计时函数
var timer = document.getElementById('timer');
timer.innerHTML='20秒'
let seconds = '20';
function showtime() {
    if(seconds>0){
    seconds=seconds-1;
    return seconds + "秒";
}
    else{
        return 0+"秒";
    }
}

//经典模式计算得分
function SumScore(){
    var Black_Block = document.getElementsByClassName('Black-Block');
    console.log(45-Black_Block.length);
    var scores = document.getElementById('scores');
    scores.innerHTML=45-Black_Block.length;
}

// function BlackBottom() {
//     var Black_Block = document.getElementsByClassName('Black-Block');
//     for (let index = 0; index < Black_Block.length; index++) {
//         const element = Black_Block[index];
//         if(element.offsetTop)
//         console.log(element.offsetTop)
//     }
// } 

